// import React, {useLayoutEffect} from 'react';
// import anime from 'animejs';
// import styles from './index.less';
// import classnames from "classnames";
//
// const LeakyPreloader: React.FC = () => {
//
//   useLayoutEffect(() => {
//     const basicTimeline = anime.timeline({
//       autoplay: false
//     });
//
//     // const pathEls = document.getElementsByClassName(".check");
//     // for (const i = 0; i < pathEls.length; i++) {
//     //   pathEl = pathEls[i];
//     //   const offset = anime.setDashoffset(pathEl);
//     //   pathEl.setAttribute("stroke-dashoffset", offset);
//     // }
//
//     const pathEl = document.getElementById("check");
//     const offset = anime.setDashoffset(pathEl);
//     pathEl.setAttribute("stroke-dashoffset", offset);
//
//     basicTimeline
//       .add({
//         targets: ".text",
//         duration: 1,
//         opacity: "0"
//       })
//       .add({
//         targets: ".button",
//         duration: 1300,
//         height: 10,
//         width: 300,
//         backgroundColor: "#2B2D2F",
//         border: "0",
//         borderRadius: 100
//       })
//       .add({
//         targets: ".progress_bar",
//         duration: 2000,
//         width: 300,
//         easing: "linear"
//       })
//       .add({
//         targets: ".button",
//         width: 0,
//         duration: 1
//       })
//       .add({
//         targets: ".progress_bar",
//         width: 80,
//         height: 80,
//         delay: 500,
//         duration: 750,
//         borderRadius: 80,
//         backgroundColor: "#71DFBE"
//       })
//       .add({
//         targets: pathEl,
//         strokeDashoffset: [anime.setDashoffset, 0],
//         duration: 200,
//         easing: "easeInOutSine"
//       });
//
//     const button = document.getElementById("button")
//     button.onclick = function () {
//       basicTimeline.play();
//     }
//     const text = document.getElementById("text")
//     text.onclick = function () {
//       basicTimeline.play();
//     }
//   }, []); // Only run once.
//
//   return (
//     <div className={styles.content}>
//       <div className={classnames(styles.button, "button")} id="button">
//         <div className={classnames(styles.text, "text")} id="text">Submit</div>
//       </div>
//       <div className={classnames(styles.progress_bar, "progress_bar")}></div>
//       <svg x="0px" y="0px" viewBox="0 0 25 30">
//         <path className={classnames(styles.check, "check", "st0")} id="check" d="M2,19.2C5.9,23.6,9.4,28,9.4,28L23,2"/>
//       </svg>
//     </div>
//   );
//
//
// };
//
// export default LeakyPreloader;
